// 4. 电梯导航
{
    // 获取电梯导航ul
    var menu = document.querySelector('.menu');
    // 获取优购秒杀
    var ms = document.querySelector('.miaosha');

    // 获取所有楼层与页面顶部的距离
    var floors = document.querySelectorAll('.cate');
    var tops = [];
    for (var i = 0; i < floors.length; i++) {
        tops.push(floors[i].offsetTop);
    }
    console.log(tops);


    // 获取所有的楼层按钮，并注册点击事件
    var btns = document.querySelectorAll('.menu li');
    for (var i = 0; i < btns.length; i++) {
        btns[i].index = i;
        btns[i].onclick = function() {
            // console.log(tops[this.index]);
            // 获取当前Y坐标
            var startPos = window.scrollY;
            var targetPos = tops[this.index];
            if (startPos > targetPos) {
                up(startPos, targetPos);
            } else {
                down(startPos, targetPos);
            }
            activeFloor(this.index);
        }
    }

    function down(startPos, targetPos) {
        var timer = setInterval(function() {
            // 每隔50ms startPos增加若干像素，知道startPos>=targetPos，则停止动画函数
            if (startPos < targetPos) {
                startPos += 20;
                startPos = startPos > targetPos ? targetPos : startPos;
                window.scrollTo(0, startPos);
            } else {
                clearInterval(timer);
            }
        }, 10);
    }

    function up(startPos, targetPos) {
        var timer = setInterval(function() {
            // 每隔50ms startPos增加若干像素，知道startPos>=targetPos，则停止动画函数
            if (startPos > targetPos) {
                startPos -= 20;
                startPos = startPos < targetPos ? targetPos : startPos;
                window.scrollTo(0, startPos);
            } else {
                clearInterval(timer);
            }
        }, 10)
    }

    function activeFloor(index) {
        for (var i = 0; i < btns.length; i++) {
            btns[i].className = '';
        }
        btns[index].className = 'active';
    }

    // 在window对象上注册onscroll事件，该事件会在浏览器滚动上下或者左右滚动时触发
    window.onscroll = function() {
        if (window.scrollY > ms.offsetTop) {
            menu.style.display = 'block';
        } else {
            menu.style.display = 'none';
        }

        if (window.scrollY >= tops[0] && window.scrollY < tops[1]) {
            activeFloor(0);
        } else if (window.scrollY >= tops[1] && window.scrollY < tops[2]) {
            activeFloor(1);
        } else if (window.scrollY >= tops[2] && window.scrollY < tops[3]) {
            activeFloor(2);
        } else if (window.scrollY >= tops[3]) {
            activeFloor(3);
        }
    }
}